<template>
  <select-tree clearable
               :multiple="multiple"
               show-search
               :nodeKey="nodeKey"
               v-model="treeValue"
               :placeholder="placeholder"
               :treeData="orgNoOptions"
               :treeProps="treeProps"
               :disabled="disabled"
               :allowTrunk="allowTrunk"
               @change="orgChange">
  </select-tree>
</template>

<script>
import SelectTree from '@/components/select-tree'

export default {
  name: 'org-select',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    // v-model值
    value: {
      type: [String, Number, Array]
    },
    // 输入框宽度
    width: String,
    // 默认带出
    initOrg: String,
    // 输入框占位符
    placeholder: {
      type: String,
      required: false,
      default: '请选择机关'
    },
    // 配置是否可多选
    multiple: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 单选时是否允许选择树干节点
    allowTrunk: {
      type: Boolean, default: false
    }
  },
  components: {
    SelectTree
  },
  data() {
    return {
      orgNoOptions: [],
      treeValue: '',
      initValue: '',
      // 树节点配置选项
      treeProps: {
        parent: 'parentNo',
        value: 'orgNo',
        label: 'orgName',
        children: 'children'
      },
      nodeKey: 'orgNo'
    }
  },
  watch: {
    value(val) {
      this.treeValue = val
    }
  },
  mounted() {
    // 远程请求回来的数据
    this.$http('/sys/org/queryOrgByTopOrgNo')
      .then((response) => {
        let orgList = response.data.orgs
        this.orgNoOptions = this.treeDataTranslate(orgList, 'orgNo', 'parentNo')
      })
  },
  methods: {
    orgChange(val) {
      this.$emit('change', val, null)
    }
  }
}
</script>

<style scoped>

</style>
